<template>
    <div class="top-right-btn" :style="style">
      <el-row>
        <!-- <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"
                    v-if="search">
          <el-button circle :icon="showSearch ? 'ZoomOut' : 'ZoomIn'" @click="toggleSearch()"/>
        </el-tooltip> -->
        <!-- <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button circle icon="Refresh" @click="refresh()"/>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="调整表格列" placement="top" v-if="defaultColumns">
          <el-button circle icon="Menu" @click="showColumn()"/>
        </el-tooltip> -->
        <el-button icon="Refresh" size="small"  @click="refresh()">
          刷新
        </el-button>
        <el-button icon="Menu" size="small"  @click="showColumn()" v-if="defaultColumns">
          自定义列
        </el-button>
      </el-row>
  
      <el-drawer :title="title" class="basic-drawer column-drawer" v-model="open" size="400px" append-to-body>
        <Scrollbar class="scroll-container">
          <div class="column-drawer-content">
            <draggable v-model="editableColumns" itemKey="id" tag="transition-group" draggable=".column-item"
                       ghost-class="ghost" :animation='200'>
              <template #item="{element}">
                <div class="column-item">
                  <div class="column-item-wrap">
                    <div class="icont mr10">
                      <el-icon class="icon-rank">
                        <Rank></Rank>
                      </el-icon>
                    </div>
                    <el-checkbox v-model="element.visible" :disabled="element.disableVisible" class="mr10 flex-full">
                      <span class="label">{{ element.label }}</span>
                    </el-checkbox>
                  </div>
                  <div v-if="!element.disableFixed" class="operate">
                    <el-radio-group v-model="element.fixed" size="small">
                      <el-radio-button @click.native.prevent="handleFixed('left', element)" label="left">
                        <el-icon>
                          <ArrowLeft></ArrowLeft>
                        </el-icon>
                      </el-radio-button>
                      <el-radio-button @click.native.prevent="handleFixed('right', element)" label="right">
                        <el-icon>
                          <ArrowRight></ArrowRight>
                        </el-icon>
                      </el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
              </template>
            </draggable>
          </div>
        </Scrollbar>
        <div class="basic-drawer-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="warning" @click="handleColumnReset">重 置</el-button>
          <el-button type="primary" @click="handleColumnSave">保存更改</el-button>
        </div>
      </el-drawer>
    </div>
  </template>
  
  <script setup>
  import {computed, getCurrentInstance, ref} from "vue";
  import {useLocalStorage} from "@vueuse/core";
  import {deepClone} from "@/utils";
  import Scrollbar from "@/components/Scrollbar/index.vue";
  import {ArrowLeft, ArrowRight} from "@element-plus/icons-vue";
  import draggable from 'vuedraggable-es'
  
  const props = defineProps({ 
    showSearch: {
      type: Boolean,
      default: true,
    },
    defaultColumns: {
      type: Array
    },
    columns: {
      type: Array
    },
    version: {
      type: String
    },
    search: {
      type: Boolean,
      default: true,
    },
    gutter: {
      type: Number,
      default: 10,
    },
  })
  
  const {proxy} = getCurrentInstance()
  
  const emits = defineEmits(['update:showSearch', 'queryTable', 'update:columns']);
  
  // 显隐数据
  const value = ref([]);
  // 弹出层标题
  const title = ref("调整表格列");
  // 是否显示弹出层
  const open = ref(false);
  
  const routeName = proxy.$route.name
  
  // const userId = userStore.userId
  
  const cacheColumns = useLocalStorage(`${routeName}_`, {version: '', columns: []})
  
  const editableColumns = ref([])
  
  // 初始化表格列
  function initColumns() {
    editableColumns.value = []
    // 存在默认的列时才操作
    if (props.defaultColumns) {
      // 从缓存读取columns
      if (cacheColumns.value.version === '' || cacheColumns.value.version !== props.version) {
        cacheColumns.value.columns = props.defaultColumns
        cacheColumns.value.version = props.version
      }
      emits('update:columns', cacheColumns.value.columns)
      editableColumns.value = deepClone(cacheColumns.value.columns)
    }
  }
  
  initColumns()
  
  const style = computed(() => {
    const ret = {};
    if (props.gutter) {
      ret.marginRight = `${props.gutter / 2}px`;
    }
    return ret;
  });
  
  // 搜索
  function toggleSearch() {
    emits("update:showSearch", !props.showSearch);
  }
  
  // 刷新
  function refresh() {
    emits("queryTable");
  }
  
  // 右侧列表元素变化
  function dataChange(data) {
    for (let item in props.columns) {
      const key = props.columns[item].key;
      props.columns[item].visible = !data.includes(key);
    }
  }
  
  // 打开显隐列dialog
  function showColumn() {
    initColumns()
    open.value = true;
  }
  
  function handleFixed(type, element) {
    if(type == element.fixed){
      element['fixed'] = null;
    }else{
      element['fixed'] = type
    }
    
  }
  
  function cancel() {
    open.value = false
  }
  
  function handleColumnReset() {
    editableColumns.value = props.defaultColumns
  }
  
  function handleColumnSave() {
    const data = deepClone(editableColumns.value)
    cacheColumns.value.columns = data
    emits('update:columns', data)
    open.value = false
  }
  </script>
  
  <style lang="scss">
  .column-drawer {
    .column-drawer-content {
      flex: 1;
    }
  
    .el-radio-button__inner {
      padding: 2px 6px;
  
      i {
        font-size: 14px;
      }
    }
  
    .column-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 34px;
  
      &:hover {
  
      }
  
      .column-item-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        height: 28px;
      }
  
      .icont {
        display: flex;
        align-items: center;
        cursor: move;
      }
  
      .icon-rank {
        font-size: 17px;
        color: #999;
      }
  
      .label {
        font-size: 15px;
        color: #666;
      }
  
      .operate {
        display: flex;
        align-items: center;
      }
    }
  }
  </style>
  <style lang='scss' scoped>
  :deep(.el-transfer__button) {
    border-radius: 50%;
    display: block;
    margin-left: 0px;
  }
  
  :deep(.el-transfer__button:first-child) {
    margin-bottom: 10px;
  }
  
  .my-el-transfer {
    text-align: center;
  }
  </style>
  